<template>
  <header>
    <!-- <el-icon size="22" @click="close" v-if="!isCollapse"><Fold /></el-icon>
    <el-icon size="22" @click="close" v-else><Expand /></el-icon> -->

    <!-- <el-icon size="22" @click="close">
      <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
    </el-icon> -->

    <el-icon size="22" @click="changeCollapse">
      <slot></slot>
    </el-icon>

    <el-space>
      <span>欢迎你,{{ adminname }}</span>
      <el-button @click="exit">退出</el-button>
    </el-space>
  </header>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  // props: {
  //   isCollapse: Boolean,
  // },
  // data() {
  //   return {
  //     adminname: localStorage.getItem("adminname") || "",
  //   };
  // },
  computed: mapState("home", ["adminname"]),
  methods: {
    ...mapMutations("home", ["changeCollapse"]),
    // close() {
    // this.$emit("changeCollapse");
    // this.$store.commit("changeCollapse");
    // },
    exit() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
